﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ext.Master" AutoEventWireup="true" CodeBehind="Ext.EditGrid.aspx.cs" Inherits="Demo.Grid.Ext_EditGrid" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--<script type="text/javascript" src="/ExtJS/ux/grid/CellEditing.js"></script>--%>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.QuickTips.init();
            Ext.create('Ext.data.Store', {
                storeId: 'simpsonsStore',
                fields: ['name', 'email', 'phone'],
                data: {
                    'items': [
                        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
                        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
                        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
                        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
                    ]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });

            Ext.create('Ext.grid.Panel', {
                title: '可编辑的Grid',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    { header: 'Name', dataIndex: 'name', editor: 'textfield' },
                    {
                        header: 'Email', dataIndex: 'email', flex: 1,
                        editor: {
                            xtype: 'textfield',
                            allowBlank: false
                        }
                    },
                    { header: 'Phone', dataIndex: 'phone' }
                ],
                selType: 'cellmodel',
                plugins: [
                    Ext.create('Ext.grid.plugin.CellEditing', {
                        clicksToEdit: 1
                    })
                ],
                tbar: [
                    {
                        xtype: 'button',
                        text: '获取编辑行',
                        handler: function () {
                            var grid = this.up('grid');
                        }
                    }
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="CellEditingGrid"></div>
</asp:Content>
